<style>
    .w10 {
        float: left;
        width: 10px;
        color: #FFF;
    }

    .items {
        padding: 10px 0 4px 0;
        border-top: solid 1px #D6D4D4;
        display: block;
    }

    #dd div {
        padding-right: 10px;
        padding-bottom: 10px;
    }

    .addItems {
        float: left;
    }

    /*表格样式  */
    .add_table {
        width: 100%;
        border: 1px solid #0e90d2;
    }

    .add_table th {
        width: 80px;
        background-color: #E0ECFF;
        padding: 8px 0 8px 0;
        border-right: solid 1px #95B8E7;
        border-bottom: solid 1px #95B8E7;
    }

    .add_table td {
        border-bottom: solid 1px #95B8E7;
    }

    .add_table tr {
        border: solid 1px #95B8E7;
    }

    .tb_head {
        text-align: center;
        padding: 10px;
        background-color: #E0ECFF;
        font-size: 20px;
        font-weight: bold;
    }

    .inline {
        display: inline;
        padding-right: 5px;
    }

    .row_container {
        padding: 8px 5px 5px 5px;
    }
    .label-span{
        display: block;
        padding: 5px;
        font-weight: bold;
    }
</style>

<!--载入分类界面-->
<div id="load_fl" class="easyui-dialog" title="添加分类"
     style="width:1050px; height: 482px; padding: 0px; overflow: hidden;"
     data-options="iconCls:'icon-standard-building-link',buttons:'#dlg-load_fl_tool',closed:true,resizable:false,modal:true,closable:true">
    <div id="" class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',title:'',split:false,border:false" style="height:42px;background-color: #eeeeee">
            <form id="load_fl_form" method="post" style="padding:10px;">

                类别：
                <select id="load_fl_leibie" class="easyui-combobox" name="lbs"
                        data-options="editable:false,panelHeight:'auto'"
                        style="width:100px">
                    <option value="">所有</option>
                    <option value="平台">平台</option>
                    <option value="车型">车型</option>
                    <option value="驱动">驱动</option>
                    <option value="燃料">燃料</option>
                    <option value="混合">混合</option>
                </select>
                <input id="load_fl_item" name="item" type="hidden">
                <input id="load_fl_lb" name="lb" type="hidden">
            </form>
            <div>

            </div>
        </div>
        <div data-options="region:'east',iconCls:'icon-reload',title:'json格式化值',split:true" style="width:330px;background: #FFFEE6;">
            <div id="json_view"></div>
            <!--            <form id="fl_info_show">-->

            <!--                            <div class="row_container">-->
            <!--                                <div class="inline">-->
            <!--                                    <span class="add_label">类别：</span>-->
            <!--                                    <input name="lb" class="easyui-textbox"-->
            <!--                                           data-options="iconCls:'',editable:false,required:false,panelHeight:'auto'"-->
            <!--                                           style="width:120px"/>-->
            <!--                                </div><br/>-->
            <!--                                <div class="inline">-->
            <!--                                    <span class="add_label">名称：</span>-->
            <!--                                    <input name="title" class="easyui-textbox"-->
            <!--                                           data-options="iconCls:'',editable:false,required:false,panelHeight:'auto'"-->
            <!--                                           style="width:120px"/>-->
            <!--                                </div><br/>-->
            <!--                                <div class="inline">-->
            <!--                                    <span class="add_label">数值：</span>-->
            <!--                                    <textarea name="shuju" class="easyui-textbox" style="width: 120px; height: 120px;"-->
            <!--                                              data-options="required:false,multiline:true,editable:false"></textarea>-->
            <!--                                </div><br/>-->
            <!--                                <div class="inline">-->
            <!--                                    <span class="add_label">描述：</span>-->
            <!--                                    <textarea id="ms_test" name="ms" class="easyui-textbox" style="width: 120px; height: 80px;"-->
            <!--                                              data-options="required:false,multiline:true,editable:true"></textarea>-->
            <!--                                </div><br/>-->
            <!--                                <div class="inline">-->
            <!--                                    <span class="add_label">时间：</span>-->
            <!--                                    <input name="createtime" class="easyui-textbox"-->
            <!--                                           data-options="iconCls:'',editable:false,required:false,panelHeight:'auto'"-->
            <!--                                           style="width:120px"/>-->
            <!--                                </div>-->

            <!--                            </div>-->

            <!--            </form>-->

        </div>
        <div data-options="region:'center',title:'',border:true" style="padding:5px;background:#eee;">
            <table id="load_fl_dg"></table>
        </div>
    </div>
</div>
<div id="dlg-load_fl_tool">

    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"
       onclick="load_fls()">载入</a>
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-cancel'"
       onclick="javascript:$('#load_fl').dialog('close')">取消</a>
</div>

<!--添加分类界面-->
<div id="save_fl" class="easyui-dialog" title="添加分类" style="width:738px; height: 392px; padding: 0px; overflow: hidden;"
     data-options="iconCls:'icon-standard-folder-page',buttons:'#dlg-save_fl_tool',closed:true,resizable:false,modal:true,closable:true">
    <form id="save_fl_form" method="post" style="padding:10px;">
        <input type="hidden" name="shuju">
        <input type="hidden" name="lb">
        <div class="easyui-layout" style="width:700px;height:300px;">
            <div data-options="region:'west',title:'',split:true" style="width:320px;padding:5px;">
                <span class="label-span">标题：</span>
                <input id="title_add_fl" name="title" class="easyui-textbox"
                       data-options="prompt:'对分类组合的简单命名',iconCls:'',required:true" style="width:300px">
                <br>
                <span class="label-span">描述</span>
                <textarea name="ms" class="easyui-textbox" id="ms_add_fl"
                          style="width:300px; height: 200px;"
                          data-options="required:false,prompt:'对分类组合的简单描述，可不填！'"></textarea>
            </div>
            <div data-options="region:'center',title:'数据'" style="padding:5px;background:#eee;">
                <div id="json"></div>
            </div>
        </div>

    </form>
</div>
<div id="dlg-save_fl_tool">

    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'"
       onclick="save_fls()">确认</a>
    <a href="#" class="easyui-linkbutton"
       data-options="iconCls:'icon-cancel'"
       onclick="javascript:$('#save_fl').dialog('close')">取消</a>
</div>


<script>
    /**
     * 转换
     */
    function change_c_to_e(c){
        var chs=['平台','车型','驱动','燃料'];
        var en=['pt','cl','qd','rl'];
        var n = $.inArray(c, chs);
        return 'add_degx_'+en[n]
    }
    /**
     * 载入定义好的分类
     */
    function load_fls() {
        var rows = $('#load_fl_dg').datagrid("getSelected");
        if (rows) {
            var shuju = JSON.parse(rows.shuju);

            if (shuju.type == 'sigle') {
                var lb = shuju['value'][0]['lb']
                var lbs = change_c_to_e(lb)
                var value = shuju['value'][0]['value']
                $("#" + lbs).combobox("clear");
                $("#" + lbs).combobox("setValues", value);

            } else {
// 混合导入
                var sjArr=shuju['value']
                for (var i=0;i<4;i++) {
                    var lb = sjArr[i]['lb']
                    var lbs = change_c_to_e(lb)
                    var value = sjArr[i]['value']
                    console.log(lbs)
                    console.log(value)
                    $("#" + lbs).combobox("clear");
                    $("#" + lbs).combobox("setValues", value);
                }
            }
        } else {
            $.messager.alert("请选择", "请选择要加载的项目！", "info");
        }
    }

    $("#load_fl_leibie").combobox({
        onSelect:function(record){
            $('#load_fl_dg').datagrid('reload', {
                lb: record.value
            });
        }
    })
    var lb=$("#load_fl_lb").val('');
    console.log(lb)




    $('#load_fl_dg').datagrid({
        url: APP + '/Home/Degx/fldata',
        // queryParams: {
        //     lb: lb
        // },
        // toolbar: '#load_fl_tool',
        pagination: true,
        fit: true,
        width: function () {
            return document.body.clientWidth * 0.9
        },
        nowrap: true,
        collapsible: true,
        fitColumns: true,
        autoRowHeight: false,
        striped: true,//交替行
        singleSelect: true,//只允许选择一行
        rownumbers: true,
        border: false,
        sortName: 'id',
        sortOrder: 'desc',//倒序排列
        remoteSort: false,
        pageSize: 30,
        method: 'post',
        pageList: [10, 15, 30, 40, 50, 100, 200, 500, 1000],
        columns: [[
            {
                field: 'id',
                checkbox: true
            },
            {
                field: 'lb',
                title: '类别',
                width: 100
            },
            {
                field: 'title',
                title: '名称',
                width: 400
            },
            {
                field: 'shuju',
                title: '值',
                hidden : true
            },{
                field: 'ms',
                title: '描述',
                width: 400
            }
            ,{
                field: 'createtime',
                title: '创建日期',
                width: 400
            }



        ]],
        onDblclickRow: function (rowIndex, rowData) {

            console.log(rowData)
        },
        onClickRow:function(index, row){
            // var data=new Array()
            // data=row
            // var shuju=data.shuju
            // shuju=shuju.replace(/,/g,"\r\n")
            // data.shuju=shuju
            // $("#fl_info_show").form('load',row)
            $("#json_view").JSONView(row.shuju);

        },
        onLoadSuccess : function() {
            // $(".grid_pic").linkbutton({
            // 	text : '&nbsp;&nbsp;显示',
            // 	plain : true,
            // 	iconCls : 'icon-standard-picture'
            // });
            // $('#degx_dg').datagrid('doCellTip',{cls:{'background-color':'#EAF1FF'},delay:600});
        },
        onSelect:function(index,row){

            // $('#zpyl_'+value).form('load',row);
            // var header=row.header;
            // var reason=row.reason;
            //
            // if(reason=="SJ"){
            //     reasonStr='设计';
            // }else{
            //     reasonStr='工艺';
            // }
            // $('#header_'+value).textbox('setValue',header.replace(/,fjp203,/, "，") );
            // $('#reason_'+value).textbox('setValue',reasonStr);
            //
            //
            // var state =row.state;
            //
            // state= parseInt(state);
            //
            //
            // $('#state_'+value).textbox('setValue',strState[state]);




        }
    });
</script>